﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    @*  查询条件 *@
    <form class="layui-form layui-row layui-col-space16" lay-filter="ID-table-demo-search">
        <div>
            <label class="layui-form-label">查询条件</label>
        </div>
        <hr />
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">物料/服务编码</label>
                <div class="layui-input-block">
                    <input type="text" name="materialCode" id="materialCode" placeholder="请输入" class="layui-input" lay-affix="clear">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">物料/服务名称</label>
                <div class="layui-input-block">
                    <input type="text" name="materialName" id="materialName" placeholder="请输入" class="layui-input" lay-affix="clear">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">物料/服务</label>
                <div class="layui-input-inline">
                    <select name="materialsServicesId" id="materialsServicesId" lay-verify="required" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">物料/服务类别</label>
                <div class="layui-input-inline">
                    <select name="materialCategoryId" id="materialCategoryId" lay-verify="required" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="isStatus" id="isStatus" lay-verify="required" lay-search>
                        <option value="">请选择</option>
                        <option value="1">有效</option>
                        <option value="2">无效</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-btn-container layui-col-xs12">
            <button type="reset" class="layui-btn layui-btn-primary" style="float:right">重置</button>
            <button type="submit" id="component" class="layui-btn layui-icon layui-icon-search" lay-submit lay-filter="search" style="float:right">查询</button>
        </div>
    </form>
    <div class="layui-btn-container">
        <a  onclick="location.href='/MaterialManagements/MaterialManagementsCreate'" class="layui-btn layui-icon layui-icon-add-1"  style="float:right">新增物料/服务</a>
        <a class="layui-btn layui-icon layui-icon-search" style="float:right">查询</a>
    </div>
    <hr />
    <table class="layui-hide" id="ID-table-demo-search"></table>
    <script>
         layui.use('table',function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var util = layui.util;
            var table = layui.table;
            searchMaterialsServices()//物料/服务
            searcMaterialCategory()//物料类别
            searchMaterialUnit()//物料单位
            searchSpecificationUnit()//规格单位
            Seach()

              // 表单取值
            layui.$('#component').on('click', function () {
                Seach()
                return false;//阻止默认 from跳转
            });

            // 搜索提交
            function Seach() {
                var obj={
                    materialCode: $("#materialCode").val(),
                    materialName: $("#materialName").val(),
                    materialsServicesId: $("#materialsServicesId").val()||0,
                    materialCategoryId: $("#materialCategoryId").val()||0,
                    isStatus: $("#isStatus").val()||0,
                }
                console.log(obj)
                $.ajax({
                    type: 'get',
                    url: '@ViewBag.RedDragonWrite'+"/api/MaterialManagements/SearchMaterialManagement",
                    data: JSON.stringify(obj),
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        table.render({
                            elem: '#ID-table-demo-search',
                            cols: [[
                                {field:'materialId', width:150, title: '序号', sort: true},
                                {field:'materialsServicesName', width:150, title: '物料/服务'},
                                {field:'materialCode', width:150, title: '物料/服务编码'},
                                {field:'materialName', width:150, title: '物料/服务名称'},
                                {field:'materialCategoryName', width:150, title: '物料/服务类别'},
                                {field:'materialUnitName', width:150, title: '物料单位'},
                                {field:'specifications', width:150, title: '物料规格'},
                                {field:'packagingSpecifications', width:150, title: '规格单位'},
                                {field:'inventoryLimit', width:150, title: '库存上限'},
                                {field:'inventoryLowerLimit', width:150, title: '库存上限'},
                                {field:'createdTime', width:150, title: '创建时间',templet: '<div>{{ layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</div>'},
                                {field:'createdOwner', title: '创建人', minWidth: 150},
                                {field:'isStatus', width:150, title: '状态', templet: function(d){
                                    if(d.isStatus ==1){
                                        return '<span style="color: blue">有效</span>';
                                    }
                                    else {
                                        return '<span style="color: gray">无效</span>';
                                    }
                                }},
                                //操作列
                                {
                                fixed: 'right', width: 300, title: '操作', align:'center', templet: function (d)
                                {
                                    return '<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-on="test-page-custom" onclick="Update(' + d.materialId + ')">编辑</a><button class="layui-btn layui-btn-xs layui-icon layui-icon-delete"  lay - event="moredel" onclick="Delete(' + d.materialId + ')">删除</a > '
                                },
                            }
                            ]],
                            data: res.data,
                            page: true,
                            limits: [2, 3, 4],
                            height: 310
                        });
                        return;

                    }
                });
            };


             //物料/服务下拉框绑定
            function searchMaterialsServices() {
                $.ajax({
                    url: '@ViewBag.RedDragonWrite'+'/api/MaterialManagements/SearchMaterialsServices',
                    type: 'get',
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        var options = '<option value="0">请选择</option>';
                        $.each(res.data, function (index, item) {
                            options += '<option value="' + item.materialsServicesId + '">' + item.materialsServicesName + '</option>';
                        });
                        $('#materialsServicesId').html(options);
                        form.render('select'); // 更新下拉框渲染
                    }
                })
            }
             //物料类别下拉框绑定
            function searcMaterialCategory() {
                $.ajax({
                    url:  '@ViewBag.RedDragonWrite'+'/api/MaterialManagements/SearcMaterialCategory',
                    type: 'get',
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        var options = '<option value="0">请选择</option>';
                        $.each(res.data, function (index, item) {
                            options += '<option value="' + item.materialCategoryId + '">' + item.materialCategoryName + '</option>';
                        });
                        $('#materialCategoryId').html(options);
                        form.render('select'); // 更新下拉框渲染
                    }
                })
            }
             //物料单位下拉框绑定
            function searchMaterialUnit() {
                $.ajax({
                    url:  '@ViewBag.RedDragonWrite'+'/api/MaterialManagements/SearchMaterialUnit',
                    type: 'get',
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        var options = '<option value="0">请选择</option>';
                        $.each(res.data, function (index, item) {
                            options += '<option value="' + item.materialUnitId + '">' + item.materialUnitName + '</option>';
                        });
                        $('#materialUnitId').html(options);
                        form.render('select'); // 更新下拉框渲染
                    }
                })
            }
             //规格单位下拉框绑定
            function searchSpecificationUnit() {
                $.ajax({
                    url: '@ViewBag.RedDragonWrite'+ '/api/MaterialManagements/SearchSpecificationUnit',
                    type: 'get',
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        var options = '<option value="0">请选择</option>';
                        $.each(res.data, function (index, item) {
                            options += '<option value="' + item.specificationUnitId + '">' + item.specificationUnitName + '</option>';
                        });
                        $('#specificationUnitId').html(options);
                        form.render('select'); // 更新下拉框渲染
                    }
                })
            }
        });
    </script>

</body>
</html>